import React, { memo, useState, useEffect } from 'react'
import { Image, Skeleton } from 'antd'
import { VideoCameraOutlined } from '@ant-design/icons'


import { getCount } from '../../../utils/format'
// 引入 api
import { getAllHot40Mv } from '../../../api/mvApi'

// 引入常量
import { ImgError, PlaceholderImg } from '../../../constant/local-constant'
// import { MvArea } from '../../../constant/local-constant'
import { MvListBox } from './style'
export default memo(function MusicClubMvList() {
  const [list, setList] = useState([])

  useEffect(() => {
    getAllHot40Mv().then(res => {
      setTimeout(() => {
        setList(res.data)
      }, 2000);
    })
  }, [])

  return (
    <MvListBox>
      {
        list.length == 0 ? (<div className="wrap">
          <div className="gujiaping">
            <div style={{ width: 224, height: 206 }}>
              <div>
                <Skeleton.Button active size="large" style={{ width: "224px", height: "127px" }} />
              </div>
              <div style={{ marginTop: "10px" }}>
                <Skeleton.Input style={{ width: 200 }} active />
              </div>
            </div>
            <div style={{ width: 224, height: 206 }}>
              <div>
                <Skeleton.Button active size="large" style={{ width: "224px", height: "127px" }} />
              </div>
              <div style={{ marginTop: "10px" }}>
                <Skeleton.Input style={{ width: 200 }} active />
              </div>
            </div>
            <div style={{ width: 224, height: 206 }}>
              <div>
                <Skeleton.Button active size="large" style={{ width: "224px", height: "127px" }} />
              </div>
              <div style={{ marginTop: "10px" }}>
                <Skeleton.Input style={{ width: 200 }} active />
              </div>
            </div>
            <div style={{ width: 224, height: 206 }}>
              <div>
                <Skeleton.Button active size="large" style={{ width: "224px", height: "127px" }} />
              </div>
              <div style={{ marginTop: "10px" }}>
                <Skeleton.Input style={{ width: 200 }} active />
              </div>
            </div>
            <div style={{ width: 224, height: 206 }}>
              <div>
                <Skeleton.Button active size="large" style={{ width: "224px", height: "127px" }} />
              </div>
              <div style={{ marginTop: "10px" }}>
                <Skeleton.Input style={{ width: 200 }} active />
              </div>
            </div>
          </div>

        </div>) : (

          <main className="wrap">

            {
              list.map((item) => {
                return (
                  <div className="main_item" key={item.id}>
                    <a href="javasciprt:;">
                      <Image
                        width={224}
                        height={127}
                        src={item.cover}
                        preview={false}
                        fallback={ImgError}
                        placeholder={
                          <Image
                            preview={false}
                            width={224}
                            height={127}
                            src={PlaceholderImg}
                          />
                        }
                      />
                      <div className="main_item_pic_play"></div>
                    </a>
                    <div className="main_item_name one-txt-cut">{item.name}</div>
                    <div className="main_item_author one-txt-cut">{item.artistName}</div>
                    <div className="main_item_footer">
                      <VideoCameraOutlined />
                      <span >{getCount(item.playCount)}</span>
                    </div>
                  </div>
                )
              })
            }
          </main>
        )
      }


    </MvListBox>
  )
})
